<template>
    <v-footer color="white" app padless elevation="4">
        <!-- 失去焦点要改为false，要不然一直是true，判断的时候会判断，如果focus是true，屏幕变化滚到最下面，否则不滚-->
        <v-text-field ref="msginput" class="flex-auto py-0 pr-15"
                      v-show="inputContentFocus"
                      v-focus="inputContentFocus"
                      flat
                      v-model.trim="content"
                      solo
                      hide-details
                      v-bind="$attrs"
                      clearable
                      :placeholder="msgInputPlaceholder"
                      @blur="$store.commit('talk/inputContentBlur')"
        >
            <template v-slot:append-outer>
                <v-btn :disabled="!content" small depressed color="info" @click="sendComment">
                    发送
                </v-btn>
            </template>
        </v-text-field>
    </v-footer>
</template>

<script lang="ts">
  import {Vue, Component, Emit} from 'vue-property-decorator'
  import {namespace} from "vuex-class"

  const talkModule = namespace('talk')
  @Component
  export default class MsgInput extends Vue {
    content: string = ''
    @talkModule.State('currentContent') currentContent: string
    @talkModule.State('inputContentFocus') inputContentFocus: boolean

    get msgInputPlaceholder() {
      if (this.currentContent) {
        return '回复：' + this.currentContent
      } else {
        return ''
      }
    }

    sendComment() {
      this.$store.commit('talk/addComment', this.content)
    }

  }
</script>
<style lang="scss">
    div.v-input__append-outer {
        margin-top: 10px !important;
    }
</style>
